<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" v-model="inpValue"/>
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/中软睿达">中软睿达</router-link>
      <router-link to="/search/鸿蒙培训">鸿蒙培训</router-link>
      <router-link to="/search/如何成为鸿蒙大牛">如何成为鸿蒙大牛</router-link>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "FindMusic",
  data() {
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 1. 通过 路径 的方式跳转
      // （1）this.$router.push('路由路径') [简写]
      // this.$router.push('/search')

      // [传参] this.$router.push('路由路径?参数名=参数值')
      // this.$router.push(`/search?key=${this.inpValue}`) // query
      // this.$router.push(`/search/${this.inpValue}`)  // 动态路由
      

      // （2）this.$router.push({    [完整写法-更适合传参] - 需要传参时 用的
      //        path:'路径'
      //        query:{
      //            参数名：参数值,
      //            参数名：参数值
      //        }
      //     })
      // this.$router.push({
      //   path:'/search',
      //   query:{
      //     key:this.inpValue
      //   }
      // })
      // this.$router.push({
      //   path:`/search/${this.inpValue}`
      // })


      // 2. 通过 命名name 路由的方式跳转（需要给路由起个名字）[适合长路径]
      // 路由没有名字是不能跳的
      // this.$router.push({
      //    name:'路由名'
      //    query:{ 参数名：参数值}, 如果是query
      //    params:{ 参数名：参数值 } 如果是 动态路由传参 写 params
      // })
      this.$router.push({
        name:'search',
        // query:{
        //   key:this.inpValue
        // }
        params:{
          words:this.inpValue
        }
      })


    },
  },
};
</script>
  
  <style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.png") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #0098e8;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #0098e8;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>